<template>
    <div class="chatbox">
        <slot></slot>   
    </div>
    <div class="chat-send">
        <div class="input-group mb-3 send-text">
        <input type="text" v-model="msg" class="form-control"  aria-describedby="send-btn">
        <button class="btn btn-outline-secondary" @click="send_msg" type="send-btn" id="button-addon2">发送</button>
        </div>
    </div>
</template>

<script>
import {ref} from 'vue';
import { useStore } from 'vuex';
export default{
    setup(){
        const store = useStore();
        let msg = ref("");
        const send_msg = () =>{
            if(msg.value !== ""){
                store.state.user.socket.send(JSON.stringify({
                    event:"send_msg",
                    msg:msg.value
                }));
                store.state.user.socket.send(JSON.stringify({
                            event:"receive_msg",
                }));
            }
            msg.value = "";     
        }

        return{
            send_msg,
            msg,
        }
    }
}
</script>

<style scoped>
.div{
    color: black;
}
.chat-send{
    position: fixed;
    bottom: 0px;
    width: 40vh;
    height: 5vh;
}
.chatbox{
    overflow: auto;
    position: fixed;
    bottom: 5vh;
    width:19vw;
    height: 40vh;
    margin: 0;
    background-color: rgba(50,50,50,0.5);
    
}

</style>